<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">
			<!-- 需求：将数据字母进行反转，abc反转cba 
				 方法：将数据拆分为数组，将数组进行反转，再将数组合并为字符串
				 函数：
					1.split:拆分
					2.reverse 反转数据
					3.join(''):将数组转化为字符串
			-->
			用户输入：<input v-model="msg"/><br>
			数据展示：{{msg.split('').reverse().join('')}}
			<!-- 计算属性用法:
			将需要计算的操作通过特定的方法先行计算之后将结果进行展示 
			使用场景：如果数据需要大量计算，可以使用计算属性实现
			-->
			<br />
			计算属性：{{reverse}}
			<hr>
			<!-- 面试题：计算属性与方法的区别
				计算属性如果调用多次，则有缓存机制，只计算一次
				方法调用没有缓存机制，所以调用多次，则计算多次
				如果一个计算重复调用时，首选计算属性
			 -->
			<!-- 计算属性 -->
			{{reverse}} {{reverse}}<br>
			<!-- 方法 -->
			<!-- <button @click="reverseMe">调用方法</button> -->
			<!-- 将方法的计算结果在该位置进行展示，所以需要return -->
			{{reverseMe2()}} {{reverseMe2()}} {{reverseMe2()}}
			
			
		</div>	
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:'#app',
				data:{
					msg:'abcdefg'
				},
				//定义vue对象中的方法
				methods:{
					reverseMe(){
						console.log("方法执行")
						this.msg=this.msg.split('').reverse().join('')
					},
					reverseMe2(){
						console.log("方法执行")
						return this.msg.split('').reverse().join('')
					}
				},
				//定义计算属性
				computed:{
					//定义一个方法,要求必须要有返回值
					reverse(){
						console.log("计算属性执行")
						return this.msg.split('').reverse().join('')
					}
				},
				
			})
		</script>
	</body>
</html>
